<template>
  <view class="tabbar">
    <view
      v-for="item in tabbarList"
      :key="item.id"
      class="tab-item"
      @click="toItem(item.pagePath)"
    >
    <!-- 选择的索引和id一致说明激活状态 -->
      <!-- :src="currentPath === item.pagePath ? item.selectedIconPath:item.iconPath" -->
    <image
        :src="props.selected === item.id ? item.selectedIconPath:item.iconPath"
        mode="scaleToFill"
    />
    <view class="name">{{ item.text }}</view>
    </view>
  </view>
</template>
<!-- new URL(url, base) url相对路径，base绝对路径-->
<script setup>
import {reactive} from "vue";
const props = defineProps({
    selected:{
        type:Number,
        default:1
    }
})
const toItem = (pagePath)=>{
 uni.reLaunch({
url:pagePath
 })
}
import home from '@/static/images/home.png'
import homeActive from '@/static/images/homeActive.png'
const tabbarList = reactive([
  {
    id: 1,
    pagePath: "/pages/index/index",
    iconPath: home,
    selectedIconPath: homeActive,
    text: "首页",
  },
  {
    id: 2,
    pagePath: "/pages/order/index",
    iconPath: home,
    selectedIconPath: homeActive,
    text: "订单",
  },
  {
    id: 3,
    pagePath: "/pages/liveStream/index",
    iconPath: home,
    selectedIconPath: homeActive,
    text: "直播",
  },
  {
    id: 4,
    pagePath: "/pages/owner/index",
    iconPath: home,
    selectedIconPath: homeActive,
    text: "我的",
  },
]);
</script>

<style lang="scss" scoped>
.tabbar{
width: 100%;
 position: fixed;
  bottom: 0;
  left: 0;

 // 使用 env() 确保在安全区域内
  padding-bottom: env(safe-area-inset-bottom); // 👈 关键：适配底部安全区
  height: calc(98rpx + env(safe-area-inset-bottom)); // 高度包含安全区
background: #FFFFFF;
display: flex;
align-items: center;
 padding: 8rpx 48rpx;
.tab-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 margin-right: 126rpx;
 &:last-child{
  margin-right: 0;
 }
image{
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 8rpx;
}
.name{
  height: 20rpx;
  font-weight: 500;
font-size: 20rpx;
color: #666666;
line-height: 20rpx;

}
}
}
</style>
